import React, { PureComponent } from 'react'
import { View } from '@tarojs/components'
import { convertPx } from '@UTILS/common'
import './CouponListPlaceholder.scss'

export default class CouponListPlaceholder extends PureComponent {
  renderCard = () => {
    const {
      count = 1, style = {}, width, height
    } = this.props
    const viewStyle = { width: convertPx(width), height: convertPx(height), ...style }
    return [...Array(count)].map((item, index) => (
      <View className="coupon-container" style={viewStyle} key={index.toString()}>
        <View className="coupon-top">
          <View className="coupon-icon skeleton-blink" />
          <View className="coupon-top-right">
            <View className="coupon-title skeleton-blink" />
            <View className="coupon-desc skeleton-blink row-half" />
          </View>
        </View>
        <View className="coupon-date skeleton-blink" />
      </View>
    ))
  }

  render() {
    return (
      <View>
        {this.renderCard()}
      </View>
    )
  }
}
